<template>
  <div class="recommend">
    <header class="recommend-header">
      <p class="recommend-header-title">
        <span class="iconfont">&#xe628;</span>
        <span>精品推荐</span>
        <span class="iconfont">&#xe628;</span>
      </p>
    </header>
    <div class="videos">
      <div class="videoBox" @click="toCrouseInfo" v-for="item in recommends" :key="item.title">
        <div class="img">
          <div class="tip">
            <span>{{item.group}}</span>
            <span>{{item.subject}}</span>
          </div>
          <img :src="item.img"/>
        </div>
        <div class="info">
          <p class="title">{{item.title}}</p>
          <div class="status">
            <div class="people">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconren"/>
              </svg>
              <span>{{item.peoples}}</span>
            </div>
            <div class="star">
              <svg class="icon" aria-hidden="true" v-for="n in item.fraction" :key="n">
                <use xlink:href="#iconStarlarge"/>
              </svg>
            </div>
          </div>
          <p class="money">¥&nbsp;{{item.price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recommends: [
        {
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=405726552,559147358&fm=26&gp=0.jpg',
          group: '高中',
          subject: '物理',
          title: '质点运动',
          peoples: 2978,
          price: 14,
          fraction: 5,
        },
        {
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3665058165,513195422&fm=26&gp=0.jpg',
          group: '高中',
          subject: '化学',
          title: '冲量与动量',
          peoples: 3278,
          price: 9,
          fraction: 5,
        }, {
          img: 'http://img3.imgtn.bdimg.com/it/u=1218069035,2123348308&fm=26&gp=0.jpg',
          group: '高中',
          subject: '数学',
          title: '导数精讲',
          peoples: 8978,
          price: 33,
          fraction: 5,
        }, {
          img: 'http://img1.imgtn.bdimg.com/it/u=2716018636,1482853509&fm=26&gp=0.jpg',
          group: '高中',
          subject: '化学',
          title: '解析几何',
          peoples: 2978,
          price: 35,
          fraction: 5,
        }, {
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3222900303,1299297360&fm=26&gp=0.jpg',
          group: '高中',
          subject: '化学',
          title: '库仑定律',
          peoples: 2978,
          price: 19,
          fraction: 5,
        }, {
          img: 'http://img4.imgtn.bdimg.com/it/u=3576618222,1608637124&fm=15&gp=0.jpg',
          group: '高中',
          subject: '物理',
          title: '恒定电流',
          peoples: 2978,
          price: 0,
          fraction: 5,
        }, {
          img: 'http://img5.imgtn.bdimg.com/it/u=2572025769,2140708422&fm=26&gp=0.jpg',
          group: '高中',
          subject: '化学',
          title: '氢氧化钠常见问题',
          peoples: 2278,
          price: 23,
          fraction: 5,
        }, {
          img: 'http://img0.imgtn.bdimg.com/it/u=916634612,3393066404&fm=15&gp=0.jpg',
          group: '高中',
          subject: '数学',
          title: '化学实验安全说明',
          peoples: 9278,
          price: 0,
          fraction: 5,
        }, {
          img: 'http://img2.imgtn.bdimg.com/it/u=2792829531,3315109755&fm=15&gp=0.jpg',
          group: '高中',
          subject: '数学',
          title: '统计论',
          peoples: 3978,
          price: 43,
          fraction: 5,
        }, {
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=306081102,2683192313&fm=15&gp=0.jpg',
          group: '高中',
          subject: '化学',
          title: '化学能转化为热能',
          peoples: 1922,
          price: 19,
          fraction: 4,
        },
      ]

    };
  },
  components: {},
  created() {},
  methods: {
    toCrouseInfo() {
      this.$router.push("/crouse_info");
    }
  }
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .recommend {
    overflow: hidden;
    width: 100%;
    &-header {
      &-title {
        height: 50px;
        display: flex;
        font-size: 30px;
        justify-content: center;
        align-items: center;
        padding: 20px 0 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        .iconfont {
          font-size: 40px;
        }
      }
    }
    .videos {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      .videoBox {
        cursor: pointer;
        display: inline-block;
        width: 18%;
        margin: 10px;
        min-height: 200px;
        overflow: hidden;
        transition: all 0.3s;
        &:hover {
          transform: translateY(-10px);
          .info {
            .title,
            .money {
              color: #ff6666;
            }
          }
        }
        .img {
          border-radius: 10px;
          height: 130px;
          overflow: hidden;
          position: relative;
          img {
            width: 100%;
          }
          .tip {
            position: absolute;
            bottom: 5px;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            span {
              margin-left: 10px;
              display: inline-block;
              line-height: 20px;
              border-radius: 5px;
              width: 60px;
              height: 20px;
              color: #fff;
              font-weight: 200;
              font-size: 12px;
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .info {
          text-align: left;
          .title {
            cursor: pointer;
            margin: 10px 0;
            line-height: 20px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
          }
          .status {
            display: flex;
            justify-content: flex-start;
            .people {
              margin-bottom: 10px;
              display: inherit;
              height: 20px;
              .icon {
                width: 15px;
                height: 15px;
              }
              span {
                margin-left: 10px;
                text-align: center;
                margin-bottom: 2px;
                line-height: 20px;
                font-size: 13px;
                color: #777;
              }
            }
            .star {
              margin-left: 20px;
              .icon {
                padding-right: 2px;
                width: 12px;
                height: 12px;
              }
            }
          }
          .money {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            transition: all 0.3s;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
  .recommend {
    overflow: hidden;
    width: 100%;
    &-header {
      &-title {
        height: 50px;
        display: flex;
        font-size: 30px;
        justify-content: center;
        align-items: center;
        padding: 10px 0 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        .iconfont {
          font-size: 40px;
        }
      }
    }
    .videos {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      .videoBox {
        cursor: pointer;
        display: inline-block;
        width: 22%;
        margin: 10px;
        height: 220px;
        overflow: hidden;
        .img {
          border-radius: 10px;
          height: 110px;
          overflow: hidden;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .tip {
            position: absolute;
            bottom: 5px;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            span {
              margin-left: 10px;
              display: inline-block;
              line-height: 20px;
              border-radius: 5px;
              width: 60px;
              height: 20px;
              color: #fff;
              font-weight: 200;
              font-size: 12px;
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .info {
          text-align: left;
          .title {
            cursor: pointer;
            margin: 10px 0;
            height: 20px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
          }
          .status {
            display: flex;
            justify-content: flex-start;
            .people {
              margin-bottom: 10px;
              display: inherit;
              height: 20px;
              .icon {
                width: 15px;
                height: 15px;
              }
              span {
                margin-left: 10px;
                text-align: center;
                margin-bottom: 2px;
                line-height: 20px;
                font-size: 13px;
                color: #777;
              }
            }
            .star {
              margin-left: 20px;
              .icon {
                padding-right: 2px;
                width: 12px;
                height: 12px;
              }
            }
          }
          .money {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            transition: all 0.3s;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .recommend {
    overflow: hidden;
    width: 100%;
    &-header {
      &-title {
        height: 15px;
        display: flex;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        .iconfont {
          font-size: 22px;
        }
      }
    }
    .videos {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      .videoBox {
        width: 100%;
        margin: 10px;
        display: flex;
        overflow: hidden;
        transition: all 0.3s;
        .img {
          border-radius: 10px;
          width: 40%;
          height: 70px;
          overflow: hidden;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .tip {
            position: absolute;
            bottom: 5px;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            margin-left: 5px;
            span {
              margin-right: 5px;
              display: inline-block;
              line-height: 17px;
              border-radius: 4px;
              width: 40px;
              height: 17px;
              color: #fff;
              font-weight: 200;
              font-size: 13px;
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .info {
          margin-left: 10px;
          text-align: left;
          .title {
            cursor: pointer;
            line-height: 20px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
          }
          .status {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 8px 0;
            .people {
              .icon {
                width: 15px;
                height: 15px;
              }
              span {
                margin-left: 10px;
                text-align: center;
                margin-bottom: 2px;
                line-height: 20px;
                font-size: 13px;
                color: #777;
              }
            }
            .star {
              margin-left: 20px;
              .icon {
                padding-right: 2px;
                width: 12px;
                height: 12px;
              }
            }
          }
          .money {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            transition: all 0.3s;
          }
        }
      }
    }
  }
}
</style>
